<template>
	<view class="back">
		<view class="back-btn">
			<!-- #ifndef MP -->
			<image src="../../static/ic_back_dark_center.png" @click="goBack" />
			<!-- #endif -->
			<text>{{ cate.name }}</text>
		</view>
		<view class="back-sub" v-if="cate.sub_categories">
			<view class="mask-btn" @click="showPopup(true)"><text>{{ subName.name }}</text></view>
			<view class="mask" v-if="show" @click="showPopup(false)"></view>
			<view class="mask-right" :class="show?'up':'down'">
				<view class="sub-item">
					<ul>
						<li :class="{ active: emojiBlock == -1 }" @touchstart="emojiBlock = -1"
							@touchend="emojiBlock = -2" @click="showPopup(false, {name:'全部',id:0})">
							全部
						</li>
						<template v-if="cate.sub_categories">
							<li @click="showPopup(false, {name:item.name,id:item.id})"
								v-for="(item, index) in cate.sub_categories" :key="item.id"
								:class="{ active: emojiBlock == index }" @touchstart="emojiBlock = index"
								@touchend="emojiBlock = -2">
								{{ item.name }}
							</li>
						</template>
					</ul>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "DetailsBack",
		props: ["cate", "subName"],
		data() {
			return {
				show: false,
				emojiBlock: -2,
			};
		},
		methods: {
			goBack: function() {
				uni.navigateBack();
			},
			showPopup(e, subName) {
				this.show = e;
				if (subName) {
					this.$emit("post-subname", subName);
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.back {
		height: 50px;
		background: white;
		border-bottom: 1px solid #e9e9e9;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 10px;

		.back-btn {
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 35px;
				height: 35px;
			}

			text {
				font-size: 18px;
				font-weight: bold;
			}
		}

		.back-sub {

			letter-spacing: 1px;

			.mask-btn {
				padding: 10px;

				&::after {
					border: none;
				}

				text {
					color: #9f9f9f;
				}
			}

			.mask {
				position: fixed;
				left: 0;
				top: 0;
				width: 100vw;
				height: 100vh;
				background-color: rgba(0, 0, 0, 0.5);
				z-index: 2;
			}

			.up {
				transform: translateX(-100%);
			}

			.down {
				transform: translateX(0);
			}

			.mask-right {
				position: fixed;
				right: -40%;
				top: 0;
				background-color: white;
				z-index: 3;
				height: 100%;
				width: 40%;
				background: #f3f3f3;
				transition: all .5s;

				.sub-item {
					ul {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						padding: 0;
						list-style: none;
						.active {
							background-color: #dadada;
						}

						li {
							font-size: 14px;
							width: 100%;
							height: 50px;
							line-height: 50px;
							text-align: left;
							text-indent: 1.5em;
							border-bottom: 1px solid #dadada;
						}
					}
				}
			}
		}
	}
</style>
